<template>
  <div :class="[Wwidth > 800 ? 'show-container' : 'show-container-phone']">
    <el-card class="box-card1">
      <template #header>
        <div class="cell">
          <span class="span-tilte">用户状态</span>
          <hr class="line-box" />
        </div>
        <div class="cell">
          <span>用户总数：</span>
          {{ usernum }}

          <hr class="line-box" />
        </div>
        <div class="cell">
          <span>****</span>
          <hr class="line-box" />
        </div>
        <div class="cell">
          <span>****</span>
          <hr class="line-box" />
        </div>
        <div class="cell">
          <span></span>
        </div>
      </template>
    </el-card>

    <el-card class="box-card2">
      <template #header>
        <div class="cell">
          <span class="span-tilte">设备状态</span>
          <hr class="line-box" />
        </div>
        <div class="cell">
          <span>设备总数： {{ machine.total }}</span>
          <hr class="line-box" />
        </div>
        <div class="cell">
          <span>正在使用设备数： {{ machine.using }}</span>
          <hr class="line-box" />
        </div>
        <div class="cell">
          <span>可用设备数： {{ machine.unused }}</span>
          <hr class="line-box" />
        </div>
        <div class="cell">
          <span>不可用设备数： {{ machine.repair }}</span>
        </div>
      </template>
    </el-card>

    <el-card class="box-card3">
      <template #header>
        <div>
          <div class="cell">
            <span class="span-tilte">充值状态</span>
            <hr class="line-box" />
          </div>
          <div class="cell">
            <span>充值记录： {{ paynum.total }}</span>
            <hr class="line-box" />
          </div>
          <div class="cell">
            <span>微信充值人数：{{ paynum.weixin }}</span>
            <hr class="line-box" />
          </div>
          <div class="cell">
            <span>支付宝充值人数：{{ paynum.ali }}</span>
            <hr class="line-box" />
          </div>
          <div class="cell">
            <span></span>
          </div>
        </div>
      </template>
    </el-card>
    <el-card class="box-card4">
      <template #header>
        <div>
          <div class="cell">
            <span class="span-tilte">公告状态</span>
            <hr class="line-box" />
          </div>
          <div class="cell">
            <span>已发布公告数： {{ article.total }}</span>
            <hr class="line-box" />
          </div>
          <div class="cell">
            <span>最近公告ID: {{ article.new }}</span>
            <hr class="line-box" />
          </div>
          <div class="cell">
            <span>****</span>
            <hr class="line-box" />
          </div>
          <div class="cell">
            <span></span>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getUserData } from '@/api/users'
import { getSharelockData } from '@/api/sharelock'
import { getPayorderData } from '@/api/payorder'
import { getNoticeData } from '@/api/notice'
const usernum = ref()
const machine = ref({
  total: 0,
  using: 0,
  unused: 0,
  repair: 0
})
const paynum = ref({
  total: 0,
  weixin: 0,
  ali: 0
})
const article = ref({
  total: 0,
  new: 0
})

const Wwidth = ref()
const Wheight = ref()
// 我的电脑的浏览器窗口尺寸:宽度：1535;高度：794
const getwindow = () => {
  Wwidth.value = document.documentElement.clientWidth
  Wheight.value = document.documentElement.clientHeight
}
getwindow()
const initData = async () => {
  const res = await getUserData()
  // console.log(1111)
  const res1 = await getSharelockData()
  const res2 = await getPayorderData()
  const res3 = await getNoticeData()
  usernum.value = res.length
  machine.value.using = res1[0].value
  machine.value.unused = res1[1].value
  machine.value.total = res1[2].value
  machine.value.repair = res1[2].value - res1[1].value - res1[0].value
  paynum.value.ali = res2[0].value
  paynum.value.weixin = res2[1].value
  paynum.value.total = res2[2].value
  article.value.total = res3.length
  article.value.new = res3[0].noticeid
}
initData()
</script>

<style lang="scss" scoped></style>
